import React,{useState} from 'react'
import Scroll from '../../baseUI/scroll'
import './Focussquare.css'

export default function Focussquare(props) {
    const {changeappear} = props
    const [ foucussquare,setFoucussquare] = useState([
        {id:1,val:'关注'},
        {id:2,val:'广场'},
    ])
    const [num,setnum]=useState(0);
    const change = (n) =>{
        console.log(n);
        setnum(num => num=n)
        console.log(num);
        changeappear()
    }
    return (
        <>
            <Scroll
              direction="horizental"
              refresh={true}   
              >
                <div className='classify'>
                    <div className="classify-box">
                        {
                            foucussquare.map((item,index)=>{
                                return(
                                    <span
                                        className='classify-item'
                                        key={item.id}
                                        onClick={()=>change(index)}
                                        style={
                                            num +1 === item.id ?{fontSize:'0.43rem',color:'black'}:{}
                                        }
                                    >
                                            <b>{item.val}</b>
                                    </span>
                                )
                            })
                        }
                    </div>
                </div>    
            </Scroll>
        </>
    )
}

